<template>
	<view class="back-grey">
		<scroll-view class="scroll-view_H back-white common-text-size" scroll-x="true">
			<view class="scroll-view-item_H" v-for="(item, index) in items" :key="index" @click="checkItem(index)">
				<text :class="item.active ? 'active' : ''">{{item.title}}</text>
			</view>
		</scroll-view>
		<view class="scroll-content">
			<view class="none back-white" v-if="(orderAll.list).length == 0">
				暂无数据
			</view>
			<view v-else>
				<common-list :orderAll="orderAll"></common-list>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonList from '../../../components/common-list.vue';
	export default {
		components: {
			CommonList
		},
		onReachBottom() {
			let nextPage = this.orderAll.nextPage;
			if (nextPage > 1) {
				this.getData(nextPage);
			} else {
				uni.showToast({
					icon: "none",
					title: "没有更多了"
				})
			}
		},
		onPullDownRefresh() {
			this.getData();
		},
		data() {
			return {
				data: {},
				orderAll: {
					list: []
				},
				items: [{
						title: "全部",
						active: true
					},
					{
						title: "待审核",
						active: false
					},
					{
						title: "待发货",
						active: false
					},
					{
						title: "待收货",
						active: false
					},
					{
						title: "已完成",
						active: false
					},
					{
						title: "已关闭",
						active: false
					},
					{
						title: "待提交",
						active: false
					},
					{
						title: "已提交",
						active: false
					},
				]
			}
		},
		methods: {
			getData(index = 1) {
				let _this = this;
				this.$http({
					url: `/order/list/${index}`,
					method: "POST",
					data: _this.data
				}).then(response => {
					let data = response.data;
					if (data.code == 200) {
						_this.orderAll = data.data;
						uni.stopPullDownRefresh();
					}
				})
			},
			checkItem(e) {
				let items = []
				this.items = (this.items).forEach((item, index) => {
					if (e == index) item.active = true;
					else item.active = false;
					items.push(item);
				})
				this.items = items;
				// 0：待审核，1：待发货，2：待收货，3：已完成，4：已关闭
				if (e > 0) {
					this.data = {
						status: (e - 1)
					}
				} else {
					this.data = {}
				}
				this.getData()
			}
		},
		onLoad() {
			this.getData();
		}
	}
</script>

<style>
	@import url("/static/css/common.css");

	.none {
		text-align: center;
		height: calc(85vh);
		padding: calc(5vh) 0 calc(5vh) 0;
	}

	.scroll-content {
		width: 96vw;
		margin: calc(1vh) calc(2vw) calc(1vh) calc(2vw);
	}

	.active {
		border-bottom: #4CD964 solid 1px;
	}

	.scroll-view_H {
		white-space: nowrap;
		overflow: hidden;
		height: calc(5vh);
		border-bottom: #E6E6E6 solid 1px;
		scrollbar-width: none;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: calc(30vw);
		height: calc(5vh);
		line-height: calc(5vh);
		text-align: center;
	}
</style>
